<header>
  <div class="head-left" (click)="goBack();">
    <i class="fa fa-chevron-left"></i>
  </div>
  <div class="head-content">
    <div class="search-wrap">
      <input type="text" placeholder="请输入图书的名字/ISBN" [(ngModel)]="keyword">
    </div>
  </div>
  <div class="head-right" (click)="goSearch_onclick();">
    <i class="fa fa-search"></i>
  </div>
</header>
<div class="content" [@aroAnimation]="'fadeIn'">
  <mat-list *ngIf="state">
    <mat-list-item>历史搜索</mat-list-item>
    <mat-divider></mat-divider>
    <div class="list" *ngFor="let item of keywordlist;">
      <mat-list-item (click)="goList_onclick(item);">{{item}}
        <i class="fa fa-times-circle-o" (click)="clearSingleKeyword_onclick(item);"></i>
      </mat-list-item>
      <mat-divider></mat-divider>
    </div>
    <mat-list-item>
      <button mat-button (click)="clearKeywords_onclick();">
        <i class="fa fa-trash-o"></i>
        清空搜索历史记录
      </button>
    </mat-list-item>
  </mat-list>
</div>
